import React from 'react';
import {
  View,
  Text,
  StyleSheet,
  ScrollView,
  Image,
  TouchableOpacity,
} from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import { HomeScreenNavigationProp } from '../types/navigation.types';
import { navigate } from '../navigation/navigationUtils';

type Props = {
  navigation: HomeScreenNavigationProp;
};

const HomeScreen: React.FC<Props> = ({ navigation }) => {
  return (
    <SafeAreaView style={styles.container} edges={['right', 'left']}>
      <ScrollView style={styles.scrollView}>
        <View style={styles.header}>
          <Text style={styles.title}>Hello</Text>
          <Text style={styles.subtitle}>欢迎来到宠物管家小程序</Text>
        </View>

        <View style={styles.card}>
          <View style={styles.cardHeader}>
            <Text style={styles.cardTitle}>我的宠物档案</Text>
            <TouchableOpacity>
              <Text style={styles.addButton}>+ 新增</Text>
            </TouchableOpacity>
          </View>
          
          <View style={styles.petCard}>
            <Image
              source={{ uri: 'https://reactnative.dev/img/tiny_logo.png' }}
              style={styles.petImage}
            />
            <View style={styles.petInfo}>
              <Text style={styles.petName}>汪汪</Text>
              <View style={styles.petTags}>
                <View style={styles.tagBlue}>
                  <Text style={styles.tagText}>已经陪你3000天</Text>
                </View>
                <View style={styles.breedTag}>
                  <Text style={styles.breedText}>柯基犬</Text>
                </View>
                <View style={styles.ageTag}>
                  <Text style={styles.ageText}>6岁</Text>
                </View>
              </View>
            </View>
          </View>
          
          <TouchableOpacity style={styles.addPetButton}>
            <Text style={styles.addPetButtonText} onPress={() => navigate('zjh')}>+</Text>
          </TouchableOpacity>
        </View>

        <View style={styles.iconRow}>
          <TouchableOpacity style={styles.iconItem}>
            <View style={styles.iconCircle}>
              <Text style={styles.iconText}>AI</Text>
            </View>
            <Text style={styles.iconLabel}>AI宠物管家</Text>
          </TouchableOpacity>
          
          <TouchableOpacity style={styles.iconItem}>
            <View style={styles.iconCircle}>
              <Text style={styles.iconText}>卡</Text>
            </View>
            <Text style={styles.iconLabel}>计次卡</Text>
          </TouchableOpacity>
          
          <TouchableOpacity style={styles.iconItem}>
            <View style={styles.iconCircle}>
              <Text style={styles.iconText}>积</Text>
            </View>
            <Text style={styles.iconLabel}>积分商城</Text>
          </TouchableOpacity>
          
          <TouchableOpacity style={styles.iconItem}>
            <View style={styles.iconCircle}>
              <Text style={styles.iconText}>其</Text>
            </View>
            <Text style={styles.iconLabel}>其他</Text>
          </TouchableOpacity>
        </View>

        <View style={styles.serviceRow}>
          <TouchableOpacity style={styles.serviceItem}>
            <View style={styles.serviceBlue}>
              <Text style={styles.serviceIcon}>+</Text>
              <Text style={styles.serviceTitle}>门诊预约</Text>
              <Text style={styles.serviceSubtitle}>APPOINTMENTS</Text>
              <View style={styles.servicePawIcon}>
                <Text>🐾</Text>
              </View>
            </View>
          </TouchableOpacity>
          
          <TouchableOpacity style={styles.serviceItem}>
            <View style={styles.serviceYellow}>
              <Text style={styles.serviceIcon}>✂️</Text>
              <Text style={styles.serviceTitle}>美容预约</Text>
              <Text style={styles.serviceSubtitle}>PET GROOMING</Text>
              <View style={styles.serviceBottleIcon}>
                <Text>🧴</Text>
              </View>
            </View>
          </TouchableOpacity>
        </View>
      </ScrollView>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f0f0f0',
  },
  scrollView: {
    flex: 1,
  },
  header: {
    backgroundColor: '#0066cc',
    padding: 20,
    paddingTop: 10,
  },
  title: {
    fontSize: 32,
    fontWeight: 'bold',
    color: 'white',
  },
  subtitle: {
    fontSize: 16,
    color: 'white',
    marginTop: 5,
  },
  card: {
    backgroundColor: 'white',
    margin: 15,
    borderRadius: 10,
    padding: 15,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 4,
    elevation: 2,
  },
  cardHeader: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    marginBottom: 10,
  },
  cardTitle: {
    fontSize: 16,
    fontWeight: 'bold',
  },
  addButton: {
    color: '#0066cc',
    fontSize: 14,
  },
  petCard: {
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: '#f9f9f9',
    borderRadius: 8,
    padding: 10,
  },
  petImage: {
    width: 60,
    height: 60,
    borderRadius: 30,
  },
  petInfo: {
    marginLeft: 15,
    flex: 1,
  },
  petName: {
    fontSize: 18,
    fontWeight: 'bold',
    marginBottom: 5,
  },
  petTags: {
    flexDirection: 'row',
    flexWrap: 'wrap',
  },
  tagBlue: {
    backgroundColor: '#e6f2ff',
    borderRadius: 15,
    paddingVertical: 3,
    paddingHorizontal: 8,
    marginRight: 5,
    marginBottom: 5,
  },
  tagText: {
    color: '#0066cc',
    fontSize: 12,
  },
  breedTag: {
    backgroundColor: '#0066cc',
    borderRadius: 15,
    paddingVertical: 3,
    paddingHorizontal: 8,
    marginRight: 5,
  },
  breedText: {
    color: 'white',
    fontSize: 12,
  },
  ageTag: {
    backgroundColor: '#e6f2ff',
    borderRadius: 15,
    paddingVertical: 3,
    paddingHorizontal: 8,
  },
  ageText: {
    color: '#0066cc',
    fontSize: 12,
  },
  addPetButton: {
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#0066cc',
    width: 40,
    height: 40,
    borderRadius: 20,
    alignSelf: 'center',
    marginTop: 15,
  },
  addPetButtonText: {
    color: 'white',
    fontSize: 24,
    fontWeight: 'bold',
  },
  iconRow: {
    flexDirection: 'row',
    justifyContent: 'space-around',
    marginHorizontal: 15,
    marginVertical: 10,
  },
  iconItem: {
    alignItems: 'center',
  },
  iconCircle: {
    width: 50,
    height: 50,
    borderRadius: 25,
    backgroundColor: '#e6f2ff',
    borderWidth: 1,
    borderColor: '#0066cc',
    alignItems: 'center',
    justifyContent: 'center',
    marginBottom: 5,
  },
  iconText: {
    color: '#0066cc',
    fontWeight: 'bold',
  },
  iconLabel: {
    fontSize: 12,
    color: '#333',
  },
  serviceRow: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    marginHorizontal: 15,
    marginVertical: 10,
  },
  serviceItem: {
    width: '48%',
  },
  serviceBlue: {
    backgroundColor: '#e6f2ff',
    borderRadius: 10,
    padding: 15,
    height: 120,
    position: 'relative',
  },
  serviceYellow: {
    backgroundColor: '#fff5e6',
    borderRadius: 10,
    padding: 15,
    height: 120,
    position: 'relative',
  },
  serviceIcon: {
    fontSize: 20,
    marginBottom: 5,
  },
  serviceTitle: {
    fontSize: 16,
    fontWeight: 'bold',
    color: '#333',
  },
  serviceSubtitle: {
    fontSize: 12,
    color: '#999',
  },
  servicePawIcon: {
    position: 'absolute',
    bottom: 10,
    right: 10,
    width: 40,
    height: 40,
    borderRadius: 20,
    backgroundColor: '#b3d9ff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  serviceBottleIcon: {
    position: 'absolute',
    bottom: 10,
    right: 10,
    width: 40,
    height: 40,
    borderRadius: 20,
    backgroundColor: '#ffe0b3',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

export default HomeScreen; 